import { Chart, Axis, Geom, Coord, Legend, Tooltip } from 'bizgoblin';

const defsObj = {
  dataKey: 'count',
  min: 0,
  max: 100,
  tickCount: 4,
};

const pixelRatio = window.devicePixelRatio * 2;

function formatLabel(text, index, total) {
  if (index === total - 1) {
    return null;
  }
  return {
    top: true,
  };
}

function RadarChart(props) {
  const { data } = props

  let max = 0
  data.forEach((value) => {
    if (value.count > max) {
      max = value.count
    }
  })

  return (
    <>
      <Chart width="88px" height="88px" data={data} defs={[{ ...defsObj, max }]} pixelRatio={pixelRatio} padding={12}>
        <Axis dataKey="count" label={formatLabel} grid={{ lineDash: null, type: 'arc' }} />
        <Axis dataKey="name" labelOffset={3} grid={{ lineDash: null, type: 'arc' }} />
        <Tooltip offsetY={50} showTitle={true} />
        <Coord type="polar" />
        <Geom geom="line" position="name*count" style={{ lineWidth: 1 }} />
        <Geom geom="point" position="name*count" style={{ lineWidth: 1 }} />
      </Chart>
    </>
  )
}

export default RadarChart